<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/reg.css"/>
    <script src="js/jquery-2.1.0.js"></script>
    <script>
        $(function(){
            var oBtn = $("#zhuce");
            oBtn.click(function(){
                var userName = $("input[name = 'userName']").val();
                var userNikename = $("input[name = 'userNikename']").val();
                var userPhone = $("input[name = 'userPhone']").val();
                var userSchool = $("input[name = 'userSchool']").val();
                var userPassword = $("input[name = 'password']").val()
                $.ajax("/fengwei/user/register",{
                    type:"post",
                    data:{
                        'userName':userName,
                        'userNikename':userNikename,
                        'userPhone':userPhone,
                        'userSchool':userSchool,
                        'userPassword':userPassword
                    },
                    success:function(data){
//                        在这里注册成功后跳转页面
                        console.log(data);
                        window.location.href = "login.html";
                    },
                    error:function(){
                        alert(0)
                    }
                })
            })

        })
//        前台命名规则和后台一样：data:{'userName':userName},
//        如果有重复的后台返回一个false的字符串 ， 如果成功返回一个ture 可以在浏览器控制台验证
    </script>

<body >
<a id="back" onClick="javascript :history.back(-1);">
    <
</a>
<div id="login_bg"><!--login的背景-->
    <img src="img/reg_bg.jpg"/>
</div>

<div id="logo"><!--头部logo部分-->

</div>

<div id="reg_con" style="color: #fff;"><!--注册表单部分-->

    <div id="Nikename">
        <input type="text" name="userNikename" id="userNikename" placeholder="请输入您的昵称" />
    </div>
    <div id="passwor">
        <input type="password" name="password" id="password" placeholder="输入您的密码" maxlength="16"/>
    </div>
    <div id="passwor2">
        <input type="password" name="password2" id="password2" placeholder="确认您的密码" maxlength="16" />
    </div>
    <div id="Phone">
        <input type="text" name="userPhone" id="userPhone" placeholder="请输入您的电话" />
    </div>
    <div id="Name">
        <input type="text" name="userName" id="userName" placeholder="请输入您的姓名" />
    </div>
    <div id="School">
        <input type="text" name="userSchool" id="userSchool" placeholder="请输入您的学校" />
    </div>
    <div id="error_box"></div>
    <input type="button" name="zhuce" id="zhuce" onclick="fnLogin()" value="注    册" />
</div>
</body>
<script type="text/javascript">

    //   表单验证

    function fnLogin(){
        var ouserNikename = document.getElementById("userNikename");
        var opassword = document.getElementById("password");
        var opassword2 = document.getElementById("password2");
        var ouserPhone = document.getElementById("userPhone");
        var ouserName= document.getElementById("userName");


        console.log(ouserNikename);

        if(ouserNikename.value.search(/^[\u0391-\uFFE5]{2,4}$/) ){
            alert("用户名必须为中文");

            return;
        }
        if(opassword.value.length > 16 || opassword.value.length < 6){
            alert("密码长度必须在6~16位之间");

            return;
        }
        if(opassword.value!=opassword2.value){
            alert("两次所输入的密码不同");

            return;
        }
        if(ouserPhone.value.length > 11 || userPhone.value.length < 11){
            alert("请输入正确的手机号");

            return;

        }
        if(ouserName.value.search(/^[\u0391-\uFFE5]{2,4}$/)){
            alert("请输入正确的名字");

            return;
        }

        alert("注册成功");
    }
</script>
</html>